<!-- 动态表单渲染组件 -->
<template>
  <a-form-item
    :label="name"
    field="oneValue"
    show-colon
    :rules="{
      required: Number(props.required) === 1 ? true : false,
      validator
    }"
  >
    <!-- 基础控件 -->
    <base-control
      :component-type="componentType"
      :code="code"
      :props="getProps"
      :name="name"
      v-model:values="oneValue"
      :required="required"
      :regex="regex"
      :disabled="disabled"
    >
    </base-control>

    <!-- 组织控件 -->
    <organization-control
      :component-type="componentType"
      :code="code"
      :props="getProps"
      :name="name"
      v-model:values="oneValue"
      :required="required"
      :regex="regex"
      :disabled="disabled"
    ></organization-control>

    <!-- 工商信息控件 -->
    <business-control
      :component-type="componentType"
      :code="code"
      :props="getProps"
      :name="name"
      v-model:values="oneValue"
      :required="required"
      :regex="regex"
      :disabled="disabled"
    ></business-control>

    <!-- 职位控件 -->
    <position-control
      :component-type="componentType"
      :code="code"
      :props="getProps"
      :name="name"
      v-model:values="oneValue"
      :required="required"
      :regex="regex"
      :disabled="disabled"
    >
    </position-control>

    <!-- 人员控件 -->
    <human-control
      :component-type="componentType"
      :code="code"
      :props="getProps"
      :name="name"
      v-model:values="oneValue"
      :required="required"
      :regex="regex"
      :disabled="disabled"
    >
    </human-control>
  </a-form-item>
</template>

<script setup lang="ts">
const props = withDefaults(
  //参数说明
  defineProps<{
    componentType: string;
    code: string;
    props: { [propName: string]: any };
    name: string;
    required: boolean;
    disabled?: boolean;
    values: any;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);

// console.log(props);

const emit = defineEmits(['update:values']);
//复制一份props
const getProps = computed(() => {
  return props.props;
});

const validator = (value: any, callback: any) => {
  let { componentType, name, values, required, regex }: any = props;
  // 如果required为1则赋值为true
  if (required === 1) required = true;
  else required = false;
  console.log(1, values, props);
  if (values) return;

  if (componentType === 'TEXT') {
    //单行输入框
    const { validate } = getProps.value;
    if (required && !values) return callback('请输入' + name);
    if (!validate) return callback();

    if (regex) {
      const roleItem = regex[validate];
      const checkVal = roleItem.role.test(values[0]);
      if (!checkVal) {
        return callback(new Error('请输入正确的' + roleItem.name));
      }
    }
  } else if (componentType === 'TEXT_AREA') {
    //多行输入框
    if (required && !values[0]) return callback(`请输入${name}`);
  } else if (componentType === 'NUMBER') {
    if (required && !values[0]) return callback(`请输入${name}`);
  } else if (componentType === 'DATE' || componentType === 'DATE_RANGE') {
    if (required && !values[0]) return callback(`请选择${name}`);
  }

  callback();
};
//当value只用到第一个绑定这个参数
const oneValue = computed({
  get() {
    return props.values;
  },
  set(val) {
    emit('update:values', val);
  }
});

// 多选双向绑定
const moreValue = computed({
  get() {
    return props.values;
  },
  set(val) {
    emit('update:values', [val]);
  }
});

// watch(props, (val) => {
// });

// 储存数组对象的values
// const objArrValues = computed({
//   get() {
//     return props.values;
//   },
//   set(val) {
//     emit('update:values', val);
//   },
// });

// const getDepartmentList = () => {};
</script>

<style></style>
